<template>
  <div class="hello">
    <h3 style="text-align: left">
      数据：<el-button
        type="primary"
        @click="dialogVisible = true"
        icon="el-icon-setting"
        >设置</el-button
      >
    </h3>

    <hr />

    <div v-if="hasName">
      <table style="width: 100%" class="oneTable">
        <tr v-for="(item, index) in baseData" :key="item.id + index">
          <td
            v-for="(td, tindex) in item.tdArr"
            :key="td.name + index + tindex"
          >
            <el-input v-if="td.type == 'input'" type="primary">{{ td.name }}</el-input>
            <el-select v-else-if="td.type == 'select'" type="primary">
              <el-option :label="item" :value="item" v-for="(item) in td.options" :key="item"></el-option>
            </el-select>
          </td>
        </tr>
      </table>
    </div>
    <p v-else class="color_desc">暂无数据</p>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <div>
        <p>控件列表：</p>
        <!-- <ul class="btnUl">
          <li 
            v-for="(row,faIndex) in setBaseData" 
            :key="row.name+faIndex"
            >
            <div
              v-for="(one,index) in row.tdArr" 
              :key="one.name+index"
              :draggable="!one.disabled"
              @dragstart="drag()"
              :id="[faIndex,index]">
              <el-button type="primary" :disabled="one.disabled">
                {{one.name}}
              </el-button>
            </div>
          </li>
        </ul>

        <hr />
      </div>
      <table style="width: 100%" class="oneTable">
        <tr v-for="(item, index) in setData" :key="item.id + index">
          <td
            v-for="(td, tindex) in item.tdArr"
            :key="td.name + index + tindex"
            @drop="drop()"
            @dragover="allowDrop()"
            :data-index="[index, tindex]"
          >
            <el-button type="primary" v-if="td.name">{{ td.name }}</el-button>
          </td>
        </tr>
      </table> -->
      
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="是否显示"
            width="180">
            <template>
              <el-switch v-model="hasName"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="排序"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureSet"
          >确 定</el-button
        >
      </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      data0: '',
      data1: '',
      tableData: [{
          date: '输入框',
          type: 'input',
          name: '1',
          address: '1'
        }, {
          date: '下拉列表',
          type: 'select',
          name: '2',
          address: '2',
          options:[
            123,456
          ]
        }, {
          date: '输入框2',
          type: 'input',
          name: '3',
          address: '3'
        }],
      hasName: false,
      dialogVisible: true,
      setData: [],
      setBaseData: [],
      showData: [],
      baseData: [
        {
          id: 1,
          name: "第一行",
          tdArr: [
            {
          date: '输入框',
          type: 'input',
          name: '1',
          address: '1'
        },
            {
          date: '下拉列表',
          type: 'select',
          name: '2',
          address: '2',
          options:[
            123,456
          ]
        },
            {
              id: "1-3",
              name: "搜索3",
            },
            {
              id: "1-4",
              name: "搜索4",
            },
          ],
        },
        {
          id: 2,
          name: "第2行",
          tdArr: [
            {
              id: "1-1",
              name: "搜索5",
            },
            {
              id: "1-2",
              name: "搜索6",
            },
            {
              id: "1-3",
              name: "搜索7",
            },
            {
              id: "1-4",
              name: "搜索8",
            },
          ],
        },
        {
          id: 3,
          name: "第3行",
          tdArr: [
            {
              id: "1-1",
              name: "搜索9",
            },
            {
              id: "1-2",
              name: "搜索10",
            },
            {
              id: "1-3",
              name: "搜索11",
            },
             {
          date: '下拉列表',
          type: 'select',
          name: '2',
          address: '2',
          options:[
            123,456
          ]
        },
          ],
        },
      ],
    };
  },
  mounted(){
    this.initFun()
  },
  methods: {
    async initFun(){
      await this.getData()
      await this.getData1()
    },
    getData(){
      return new Promise((resolve,reject)=>{
        this.$axios.get('http://localhost:3000')
        .then(res=>{
          console.log('成功',res);
          this.data0 = res.data
          resolve(res)
        })
        .catch(err=>{
          console.error('失败',err);
          reject(err)
        })
      })
    },
    getData1(){
      return new Promise((resolve,reject)=>{
        this.$axios.get('http://localhost:3000/data1')
        .then(res=>{
          console.log('成功',res);
          this.data1 = res.data
          resolve(res)
        })
        .catch(err=>{
          console.error('失败',err);
          reject(err)
        })
      })
    },

    // 设置保存
    sureSet(){
      this.hasName = true;
      // 深拷贝，避免数据污染
      this.showData = JSON.parse(JSON.stringify(this.setData))
      console.log('this.showData',this.showData);
      for(let i=0;i<this.showData.length;i++){
        let arr = this.showData[i].tdArr
        for(let j=0;j<arr.length;j++){
          if(arr[j].name != ''){
            console.log('有一个',i,j);
            this.hasName = true;
            break;
          }
        }
      }
      this.dialogVisible = false;
    },
    // 拖拽函数
    allowDrop() {
      event.preventDefault();
    },
    drag() {
      console.log('event',event);
      event.dataTransfer.setData("Text", event.target.id);
    },
    drop() {
      event.preventDefault();
      console.log('drop--event',event);
      var id = event.dataTransfer.getData("Text");
      console.log('id',id);

      // 来源数据
      let [faIndex,index] = id.split(',')
      let one = this.setBaseData[faIndex].tdArr[index]
      one.disabled = true;

      // 松手时格子，存放格子
      let toIndex = event.target.dataset.index.split(',')
      console.log('toIndex',toIndex);

      console.log('one',one);
      let newOne = JSON.parse(JSON.stringify(one))
      this.setData[toIndex[0]].tdArr.splice(toIndex[1],1, newOne)
    },
  },
  created() {
    let nullData = JSON.parse(JSON.stringify(this.baseData));
    for (let i = 0; i < nullData.length; i++) {
      for (let j = 0; j < nullData[i].tdArr.length; j++) {
        nullData[i].tdArr[j].name = "";
      }
    }
    this.setData = nullData;
    this.setBaseData = JSON.parse(JSON.stringify(this.baseData));
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 表格样式 */
.oneTable{
  border-left: 1px solid #69f;
  border-top: 1px solid #69f;
}

.oneTable td{
  border-right: 1px solid #69f;
  border-bottom: 1px solid #69f;
}

.color_desc{
  font-size: 16px;
  color: #888;
}

.hello {
  text-align: left;
}
.btnUl li {
  margin-bottom: 10px;
  display: block;
  overflow: hidden;
  list-style: none;
}
.btnUl li button{
  float: left;
  margin-left: 15px;
}
.oneTable td {
  height: 50px;
  width: 120px;
}
</style>
